<template>
  <div class="beijing">
    <div class="banxin products">
      <section>
        <span class="fontcolor">首页</span>/
        <span>全部商品</span>
      </section>
      <img class="tou" src="../assets/images/products/banner.png" alt="" />
      <ul class="products_t">
        <li class="fontcolor">排序:</li>
        <li class="active">全部</li>
        <li>我能兑换的</li>
        <li>0-500分</li>
        <li>500-1000分</li>
        <li class="active">1000-1500分</li>
        <li>1500-2000分</li>
      </ul>
      <ul class="products_c">
        <li class="fontcolor">分类:</li>
        <li class="active">全部</li>
        <li>实物商品</li>
        <li>虚拟商品</li>
      </ul>
      <!-- <ul class="products_b">
        <li v-for="(item, index) in jinping1" :key="index">
          <div class="products_b_sp">
            <div class="products_b_sp_t">
              <img :src="item.coverImg" alt="" />
            </div>
            <div class="products_b_sp_b">
              <p>{{ item.name }}</p>
              <span
                >{{ item.coin }}
                <img src="../assets/images/home/monad.png" alt="" />
              </span>
              <div class="btn">立即兑换</div>
            </div>
            <img
              v-show="item.isHotSale == 1"
              class="biao"
              src="../assets/images/home/hot-j.png"
              alt=""
            />
            <img
              v-show="item.isLatest == 1"
              class="biao"
              src="../assets/images/home/new-j.png"
              alt=""
            />
          </div>
        </li>
      </ul> -->
      <LoadMore :bigarr="jinping1" :size="8">
        <Product slot-scope="scope" :jingpin="scope.smallarr" />
      </LoadMore>
    </div>
  </div>
</template>

<script>
import Product from "@/components/Product.vue";
import { getProdectsApi } from "../request/api";
export default {
  data() {
    return {
      jinping: [],
      jinping1: [],
      jinping2: [],
    };
  },
  methods: {
    // add(val) {
    //   console.log("111");
    //   this.jinping1 = this.jinping1.filter((item, index, self) => {
    //     return item < val;
    //   });
    // },
  },
  created() {
    getProdectsApi().then((res) => {
      console.log(res);
      this.jinping = res.data.data;
      console.log(res);
      this.jinping.forEach((item) => {
        this.jinping1.push({
          name: item.name,
          coin: item.coin,
          coverImg: "http://sc.wolfcode.cn" + item.coverImg,
          isHotSale: item.isHotSale,
          isLatest: item.isLatest,
        });
      });
      console.log(this.jinping1);
    });
  },
  components: {
    Product,
  },
};
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";
.products {
  section {
    height: 40px;
    padding-left: 10px;
    font-size: 16px;
    font-family: SourceHanSansSC;
    font-weight: bold;
    color: #999999;
    line-height: 40px;
    span {
      &.fontcolor {
        color: black;
      }
    }
  }
  .products_t,
  .products_c {
    display: flex;
    margin-bottom: 22px;
    cursor: pointer;
    li {
      padding-left: 10px;
      font-size: 16px;
      font-family: SourceHanSansSC;
      font-weight: bold;
      color: #999999;
      &.active {
        color: @blue;
      }
      &.fontcolor {
        color: black;
      }
    }
  }
  .tou {
    margin-bottom: 22px;
  }
}
.beijing {
  background-color: #f5f5f5;
}
</style>